import React, { Component, useEffect, useState } from 'react';
import "./index.less"
import { Form, Input, Button, Select, Table, Popconfirm, message } from 'antd';
import { connect, useDispatch } from "dva"
import { Dispatch } from "umi"
import { Key } from 'rc-select/lib/interface/generator';
const { Option } = Select;

//表单 layout布局
const layout = {
    labelCol: { span: 16 },
    wrapperCol: { span: 24 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};




//连接数据库 获取数据
const mapStateToProps = (state: any, ownProps: any) => {
    // console.log(state,64545454545);

    return state
}

const Student = (props: any) => {
    //调用dispatch方法
    const dispatch = useDispatch()

    let allstudent = props.student.allStudent //所有的学生数据
    let allroom = props.student.allRoom //所有教室
    let allgrade = props.student.allGrade //所有班级号

    let [gradeRoom, setgradeRoom] = useState({})//存放班级教室的input值


    //进入页面刷新   并异步请求数据
    useEffect(() => {
        dispatch({ type: "student/manageStudent" }) //请求所有学生数据
        dispatch({ type: "student/getallRoom" }) //请求所有教室
        dispatch({ type: "student/getallGrade" }) //请求所有班级号

    }, [])
    //搜索
    const onFinish = (values: any) => {
        console.log(values,"values");
        
        let bb = allstudent && allstudent.filter((item: any, index: any) => {
            if ( values.note&& !values.room_text&& !values.grade_name) {
                console.log(11);
                
                return item.student_name == values.note
            } else if ( values.room_text && !values.grade_name && !values.note ) {
                console.log(22);
                
                return item.room_text == values.room_text
            } else if ( values.grade_name && !values.note&& !values.room_text) {
                console.log(33);
                
                return item.grade_name == values.grade_name
            } else if ( values.note &&  values.room_text && !values.grade_name) {
                console.log(44);
                
                return item.student_name == values.note && item.room_text == values.room_text
            } else if ( values.room_text &&  values.grade_name && !values.note) {
                console.log(55);
                
                return item.room_text === values.room_text && item.grade_name === values.grade_name
            } 

        })
        console.log(bb, "BB");
        dispatch({ type: "student/manageStudent", action: bb }) //请求所有学生数据

    };
    //重置
    const [form] = Form.useForm();
    const onReset = () => {
        form.resetFields();
        dispatch({ type: "student/manageStudent", action: null })
    };
    //删除气泡确认框   //操作删除每一项
    function confirm(e: any) {
        // console.log(e);
        message.success('删除成功');
        dispatch({ type: "student/deleteStudent", action: { id: e } })
    }

    function cancel(e: any) {
        // console.log(e);
        message.error('已取消');
    }


    //表格字段
    const columns = [
        { title: '姓名', dataIndex: 'student_name', key: 'student_name' },
        { title: '学号', dataIndex: 'student_id', key: 'student_id' },
        { title: '班级', dataIndex: 'grade_name', key: 'grade_name' },
        { title: '教室', dataIndex: 'room_text', key: 'room_text' },
        { title: '密码', dataIndex: 'student_pwd', key: 'student_pwd' },
        {
            title: '操作',
            dataIndex: 'student_id',
            key: 'x',
            render: (dataIndex: any) => {

                return <Popconfirm
                    title="确定要删除吗？"
                    onConfirm={confirm.bind(this, dataIndex)}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                >
                    <a >删除</a>
                </Popconfirm>
                // 
            },
        },
    ];



    return (


        <div className="st_box">
            <h2 className="headerTitle">
                学生管理
            </h2>
            <div className="st_header">
                <Form {...layout} layout="inline" form={form} name="control-hooks" onFinish={onFinish}>
                    <Form.Item name="note" label="Note" >
                        <Input placeholder="输入学生姓名"/>
                    </Form.Item>
                    <Form.Item name="room_text"  >
                        <Select
                            placeholder="请选择教室号"
                            allowClear
                        >
                            {
                                allroom && allroom.map((item: any, index: any) => {
                                    return <Option value={item.room_text} key={item.room_id}>{item.room_text}</Option>
                                })
                            }


                        </Select>
                    </Form.Item>
                    <Form.Item name="grade_name"  >
                        <Select
                            placeholder="班级名"

                            allowClear
                        >
                            {
                                allgrade && allgrade.map((item: any, index: any) => {
                                    return <Option value={item.grade_name} key={item.grade_id}>{item.grade_name}</Option>
                                })
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">搜索</Button>


                    </Form.Item>
                    <Form.Item {...tailLayout}>

                        <Button htmlType="button" type="primary" onClick={onReset}>重置</Button>

                    </Form.Item>
                </Form>

            </div>
            <div className="st_main">
                <Table
                    rowKey="student_id"
                    columns={columns}
                    dataSource={allstudent}
                />
            </div>

        </div>
    );
}


export default connect(mapStateToProps, null)(Student)